<template>
  <div class="normal-complex-table">
    <h3>{{ title }}</h3>
    <table class="custom-table" :style="{ width: config.tableWidth }">
      <thead>
        <tr>
          <th
            v-for="(header, index) in headers"
            :key="header"
            :style="{
              backgroundColor: config.headerBgColor,
              color: config.headerTextColor,
              fontSize: config.headerFontSize,
              fontWeight: config.headerFontWeight,
              padding: config.cellPadding,
              width: index === 0 ? config.categoryWidth : 'auto',
              borderWidth: config.borderWidth,
              borderStyle: config.borderStyle,
              borderColor: config.borderColor,
              textAlign: config.headerAlign,
              verticalAlign: config.headerVerticalAlign,
            }"
          >
            {{ header }}
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(category, categoryIndex) in tableData" :key="category.name">
          <tr v-for="(item, itemIndex) in category.items" :key="item.indicator">
            <td
              v-if="itemIndex === 0"
              :rowspan="category.items.length"
              :style="{
                backgroundColor: config.categoryBgColor,
                color: config.categoryTextColor,
                fontSize: config.categoryFontSize,
                fontWeight: config.categoryFontWeight,
                padding: config.cellPadding,
                width: config.categoryWidth,
                borderWidth: config.borderWidth,
                borderStyle: config.borderStyle,
                borderColor: config.borderColor,
                textAlign: config.categoryAlign,
                verticalAlign: config.categoryVerticalAlign,
              }"
              class="category-cell"
            >
              {{ category.name }}
            </td>
            <td
              :style="{
                backgroundColor: config.contentBgColor,
                color: config.contentTextColor,
                fontSize: config.contentFontSize,
                padding: config.cellPadding,
                borderWidth: config.borderWidth,
                borderStyle: config.borderStyle,
                borderColor: config.borderColor,
                textAlign: config.contentAlign,
                verticalAlign: config.contentVerticalAlign,
              }"
            >
              {{ item.indicator }}
            </td>
            <td
              :style="{
                backgroundColor: config.contentBgColor,
                color: config.contentTextColor,
                fontSize: config.contentFontSize,
                padding: config.cellPadding,
                borderWidth: config.borderWidth,
                borderStyle: config.borderStyle,
                borderColor: config.borderColor,
                textAlign: config.valueAlign || config.contentAlign,
                verticalAlign: config.contentVerticalAlign,
              }"
            >
              {{ item.value }}
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script setup>
// 定义属性
const props = defineProps({
  title: {
    type: String,
    default: '复杂表格示例',
  },
  // 表格配置
  config: {
    type: Object,
    default: () => ({
      // 表格整体
      tableWidth: '100%',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: '#000',
      cellPadding: '12px',

      // 表头样式
      headerBgColor: '#4874cb',
      headerTextColor: '#ffffff',
      headerFontSize: '14px',
      headerFontWeight: '500',
      headerAlign: 'center', // 表头水平对齐
      headerVerticalAlign: 'middle', // 表头垂直对齐

      // 分类列样式
      categoryWidth: '120px',
      categoryBgColor: '#4874cb',
      categoryTextColor: '#ffffff',
      categoryFontSize: '14px',
      categoryFontWeight: '500',
      categoryAlign: 'center', // 分类列水平对齐
      categoryVerticalAlign: 'middle', // 分类列垂直对齐

      // 内容样式
      contentBgColor: '#ffffff',
      contentTextColor: '#333333',
      contentFontSize: '14px',
      contentAlign: 'center', // 内容水平对齐
      valueAlign: 'center', // 值的水平对齐（可选，默认使用contentAlign）
      contentVerticalAlign: 'middle', // 内容垂直对齐

      // hover效果
      hoverBgColor: '#f5f7fa',
    }),
  },
});

// 表头数据
const headers = ['大类', '指标', '2025'];

// 表格数据结构
const tableData = [
  {
    name: '医疗服务能力',
    items: [
      { indicator: '入组总病例数(列)', value: '9002' },
      { indicator: '医保DRG组数(组)', value: '540' },
      { indicator: 'RW≧2病例数', value: '680' },
      { indicator: '高倍率病例占比(%)', value: '1.81' },
      { indicator: '低倍率病例占比(%)', value: '4.9' },
      { indicator: 'CMI', value: '0.99' },
    ],
  },
  {
    name: '医疗服务效率',
    items: [
      { indicator: '次均费用（元）', value: '7559.76' },
      { indicator: '次均药品费（元）', value: '1163.46' },
      { indicator: '次均材料费（元）', value: '1400.7' },
      { indicator: '平均住院日（天）', value: '6.39' },
      { indicator: '药占比(%)', value: '15.39' },
      { indicator: '耗占比(%)', value: '18.53' },
      { indicator: '费用消耗指数', value: '0.95' },
    ],
  },
  {
    name: '结算指标',
    items: [
      { indicator: '总点数(万元)', value: '82.86' },
      { indicator: '拨付金额(万元)', value: '6648.65' },
      { indicator: '拨付比(%)', value: '97.7' },
      { indicator: '总结余金额（万元）', value: '-156.65' },
      { indicator: '次均结余金额（元）', value: '-174.02' },
      { indicator: '入组率(%)', value: '100' },
    ],
  },
];

// 导出方法和数据供外部使用
defineExpose({
  tableData,
});
</script>

<style lang="less" scoped>
.normal-complex-table {
  margin: 20px;

  .custom-table {
    border-collapse: collapse;
    table-layout: fixed;

    .category-cell {
      white-space: pre-line;
    }

    tbody {
      tr {
        &:hover {
          td:not(.category-cell) {
            background-color: v-bind('config.hoverBgColor') !important;
          }
        }
      }
    }
  }
}
</style>
